<template>
  <a-input-search
    v-model="value"
    placeholder="请选择"
    allow-clear
    @clear.stop="handerClear"
    @search="select"
  />
  <modal v-model:visible="visible" title="项目选择">
    <query-form
      :render-config="renderConfig"
      :render-keys="renderKeys"
      @search="searchHandle"
      @reset="resetHandle"
    />
    <table-container
      v-model:columns="columns"
      :loading="isLoading"
      :all-columns="allColumns"
      @refresh="getData"
    >
      <a-table
        :columns="columns"
        :data="renderData"
        :loading="isLoading"
        @row-click="selectRow"
      />
    </table-container>
  </modal>
</template>

<!--新script-->
<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import queryForm from '@/common/components/query-form/index.vue';
  import tableContainer from '@/common/components/table-container/index.vue';
  import { sleep } from '@/utils/tools';
  import lodash from 'lodash';
  import modal from './modal.vue';

  const renderConfig = {
    number: {
      label: '项目编号',
      field: 'number',
      componentName: 'input',
    },
    name: {
      label: '项目名称',
      field: 'number',
      componentName: 'input',
    },
    gongqi: {
      label: '工期',
      field: 'gongqi',
      componentName: 'input',
    },
    projectNo: {
      label: '产品',
      field: 'projectNo',
      componentName: 'select',
      componentProps: {
        options: [
          { label: '男', value: 1 },
          { label: '女', value: 2 },
        ],
      },
    },
    startStartDate: {
      label: '开始时间(起)',
      field: 'startStartDate',
      componentName: 'timePicker',
      componentProps: {
        format: 'YYYY-MM-DD',
      },
    },
    startEndDate: {
      label: '开始时间(止)',
      field: 'startEndDate',
      componentName: 'timePicker',
      componentProps: {
        format: 'YYYY-MM-DD',
      },
    },
    endStartDate: {
      label: '结束时间(起)',
      field: 'endStartDate',
      componentName: 'timePicker',
      componentProps: {
        format: 'YYYY-MM-DD',
      },
    },
    endEndDate: {
      label: '结束时间(止)',
      field: 'endEndDate',
      componentName: 'timePicker',
      componentProps: {
        format: 'YYYY-MM-DD',
      },
    },
  };
  const renderKeys = [
    'number',
    'name',
    'gongqi',
    'projectNo',
    'startStartDate',
    'startEndDate',
    'endStartDate',
    'endEndDate',
  ];
  const columns = ref([]);
  columns.value = [
    {
      title: '密级',
      dataIndex: '1',
    },
    {
      title: '项目编号',
      dataIndex: '2',
    },
    {
      title: '项目名称',
      dataIndex: 'name',
    },
    {
      title: '项目负责人',
      dataIndex: '4',
    },
    {
      title: '产品号',
      dataIndex: '5',
    },
    {
      title: '开始时间',
      dataIndex: '6',
    },
    {
      title: '结束时间',
      dataIndex: '7',
    },
  ];
  const emit = defineEmits(['update:value', 'handerClear']);
  const visible = ref(false);
  const value = ref('');
  const select = () => {
    visible.value = true;
  };
  const handerClear = () => {
    emit('handerClear');
  };
  const selectRow = (record: any) => {
    console.log(record, 'record');
    value.value = record.name;
    visible.value = false;
    emit('update:value', record.name);
  };
  const searchHandle = (data: any) => {
    console.log('search', data);
  };
  const resetHandle = (data: any) => {
    console.log('resetHandle', data);
  };
  const allColumns = lodash.cloneDeep(columns);
  const isLoading = ref(true);
  const renderData = ref<any[]>([]);

  const getData = async () => {
    renderData.value = [];
    isLoading.value = true;
    await sleep(2000);
    const data = reactive([
      {
        1: '1',
        2: 'Jane Doe',
        name: 23000,
        4: '32 Park Road, London',
        5: 'jane.doe@example.com',
      },
      {
        1: '2',
        2: 'Alisa Ross',
        name: 25000,
        4: '35 Park Road, London',
        5: 'alisa.ross@example.com',
      },
      {
        1: '3',
        2: 'Kevin Sandra',
        name: 22000,
        4: '31 Park Road, London',
        5: 'kevin.sandra@example.com',
      },
      {
        1: '4',
        2: 'Ed Hellen',
        name: 17000,
        4: '42 Park Road, London',
        5: 'ed.hellen@example.com',
      },
      {
        1: '5',
        2: 'William Smith',
        name: 27000,
        4: '62 Park Road, London',
        5: 'william.smith@example.com',
      },
    ]);
    renderData.value = data;
    isLoading.value = false;
  };

  getData();
</script>

<style lang="less" scoped>
  .base-component {
    color: red;
  }
</style>
